<template>
  <div className="nfts">
    <div v-for="(item, index) in nfts" :key="index">
      <div class="text">
        <span class="t1">Token Name</span>
        <label class="t2">{{ item.name }}</label>
      </div>
      <div class="text">
        <span class="t1">Ticker symbol</span>
        <label class="t2">{{ item.symbol }}</label>
      </div>
      <div class="text">
        <span class="t1">Total Supply</span>
        <label class="t2">5735.4547</label>
      </div>
      <div class="text">
        <span class="t1">Percentage of supply needed to unlock NFT collection</span>
        <label class="t2">49%</label>
      </div>
      <div class="text">
        <span class="t1">Prior Ratio</span>
        <label class="t2">30%</label>
      </div>
      <div class="text">
        <span class="t1">Posterior Ratio</span>
        <label class="t2">70%</label>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'
import { Menu } from 'ant-design-vue'

@Component({
  components: {
    Menu
  }
})
export default class Nav extends Vue {
  nfts = [{name:123,symbol:456}]
}
</script>

<style lang="less" scoped>
@import '../styles/variables';
.nfts {
  width: 470px;
  display: flex;
  justify-content: space-between;
}
  .text {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    .t1{
      font-size: 18px;
      color: #5B8083;
      font-weight: bold;
    }
    .t2{
      font-size: 18px;
      color: #5B8083;
      font-family: @fre-font;
    }
  }
</style>
